
<!DOCTYPE html>
<html lang="en">
    <head><meta name="generator" content="Hexo 3.9.0">
    
        <title>FairyGUI - 元件</title>
    
        <meta charset="utf-8">
        <meta name="description" content="FairyGUI教程">
        <meta name="keywords" content="FairyGUI,FGUI,FairyGUI教程">
        
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

        <meta property="og:type" content="article">
        <meta property="og:title" content="-元件FairyGUI">
        <meta property="og:description" content="FairyGUI教程">

        <meta name="twitter:card" content="summary">
        <meta name="twitter:title" content="元件 — FairyGUI">
        <meta name="twitter:description" content="FairyGUI教程">

      <!--  <link href='//fonts.proxy.ustclug.org/css?family=Source+Sans+Pro:300,400,600|Roboto Mono' rel='stylesheet' type='text/css'> -->

        <!-- main page styles -->
        <link rel="stylesheet" href="/docs/css/page.css">

        <!-- this needs to be loaded before guide's inline scripts -->
        <script src="/docs/js/vue.min.js"></script>
        <script>window.PAGE_TYPE = "guide_editor"</script>
    </head>
    <body class="docs">        <div id="mobile-bar" data-bg-text="FairyGUI">
            <a class="menu-button"></a>
        </div>
        <div id="header">
  <ul id="nav">
    <li><a href="/docs/guide/" class="nav-link current">教程</a></li>
<li><a href="/docs/examples/" class="nav-link">在线示例</a></li>
<li><a href="/docs/release_notes/" class="nav-link">发行日志</a></li>
<li><a href="/" class="nav-link">首页</a></li>
  </ul>
</div>

        
            <div id="main" class="fix-sidebar">
                
                    
    <div class="sidebar">
    <ul class="main-menu">
        <li><a href="/docs/guide/" class="nav-link current">教程</a></li>
<li><a href="/docs/examples/" class="nav-link">在线示例</a></li>
<li><a href="/docs/release_notes/" class="nav-link">发行日志</a></li>
<li><a href="/" class="nav-link">首页</a></li>
    </ul>
    <div class="list">
        <ul class="menu-root">
            

	 			
	                
	                <li>
	                    <a href="/docs/guide/index.html" class="sidebar-link">导读</a>
	                </li>
	            
	
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/index.html" class="sidebar-link">编辑器使用基础</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/project_settings.html" class="sidebar-link">项目设置</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/package.html" class="sidebar-link">包</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/branch.html" class="sidebar-link">分支</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/publish.html" class="sidebar-link">发布</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/object.html" class="sidebar-link current">元件</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/image.html" class="sidebar-link">图片</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/movieclip.html" class="sidebar-link">动画</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/graph.html" class="sidebar-link">图形</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/loader.html" class="sidebar-link">装载器</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/text.html" class="sidebar-link">文本</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/richtext.html" class="sidebar-link">富文本</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/group.html" class="sidebar-link">组</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/component.html" class="sidebar-link">组件</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/scrollpane.html" class="sidebar-link">滚动容器</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/controller.html" class="sidebar-link">控制器</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/relation.html" class="sidebar-link">关联系统</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/label.html" class="sidebar-link">标签</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/button.html" class="sidebar-link">按钮</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/combobox.html" class="sidebar-link">下拉框</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/progressbar.html" class="sidebar-link">进度条</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/slider.html" class="sidebar-link">滑动条</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/scrollbar.html" class="sidebar-link">滚动条</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/list.html" class="sidebar-link">列表</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/tree.html" class="sidebar-link">树</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/popup.html" class="sidebar-link">Popup</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/dragdrop.html" class="sidebar-link">Drag&Drop</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/window.html" class="sidebar-link">窗口系统</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/transition.html" class="sidebar-link">动效</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/adaptation.html" class="sidebar-link">适配</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/i18n.html" class="sidebar-link">多国语言</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/export.html" class="sidebar-link">导入和导出</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/preference.html" class="sidebar-link">偏好设置</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/plugin.html" class="sidebar-link">插件</a>
	                </li>
	            
	
	            
	                
	                
	                <li><h3>SDK</h3></li>
	                
	                <li>
	                    <a href="/docs/guide/sdk/laya.html" class="sidebar-link">LayaAir</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/egret.html" class="sidebar-link">Egret</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/cocos2dx.html" class="sidebar-link">Cocos2dx</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/creator.html" class="sidebar-link">Cocos Creator</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/cryengine.html" class="sidebar-link">Cry Engine</a>
	                </li>
	            

	            
	                
	                
	                <li><h3>SDK - Unity</h3></li>
	                
	                <li>
	                    <a href="/docs/guide/unity/index.html" class="sidebar-link">显示UI面板</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/transform.html" class="sidebar-link">坐标系统</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/atlas.html" class="sidebar-link">纹理集的处理</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/font.html" class="sidebar-link">字体的处理</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/input.html" class="sidebar-link">输入处理</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/event.html" class="sidebar-link">事件机制</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/insert3d.html" class="sidebar-link">插入模型/粒子/Spine/Canvas</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/uipainter.html" class="sidebar-link">曲面UI</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/drawcall.html" class="sidebar-link">DrawCall优化</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/lua.html" class="sidebar-link">在Lua中使用</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/special.html" class="sidebar-link">特色功能</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/faq.html" class="sidebar-link">常见问题</a>
	                </li>
	            

            
        </ul>
    </div>
</div>


<div class="content guide_editor with-sidebar ">
    
      <h1>元件</h1>
    
    <p>每个舞台中的组成元素我们称之为元件，元件的类型有很多，他们是：</p>
<ul>
<li><code>基础元件</code> 图片、图形、动画、装载器、文本、富文本、组、组件。</li>
<li><code>组合型元件</code> 标签、按钮、下拉框、滚动条、滑动条、进度条。</li>
<li><code>特殊元件</code> 列表。</li>
</ul>
<p>在舞台上选中任意一个元件，右边的属性栏出现共同的属性设置面板有:</p>
<h2 id="基础属性"><a href="#基础属性" class="headerlink" title="基础属性"></a>基础属性</h2><p><img src="../../images/QQ20191211-163851.png" alt></p>
<ul>
<li><p><code>名称</code> 设置元件的名称。运行时可以通过GetChild(名称)获得这个元件。元件允许重名，但编辑器会在显示列表视图提示你有重名情况出现，你可以忽略这个提示。</p>
<p><img src="../../images/QQ20191211-163950.png" alt></p>
</li>
<li><p><code>位置</code> 设置元件的XY坐标。</p>
</li>
<li><p><code>尺寸</code> 设置元件的宽度和高度。</p>
</li>
<li><p><code>原大小</code> 勾选原大小可以使元件大小恢复到素材的原始大小。当素材被外部修改后，例如一张图片素材，被设计师从50x50变成100x100，如果这里勾选着原大小，则元件的宽高也自动变成100x100；如果这里没有勾选，则元件的宽高将保持50x50，图片发生缩放。</p>
</li>
<li><p><code>保持比例</code> 在设计时，保持元件的长宽比例不变，也即是修改宽或高时，高或宽将同时变化。这是辅助设计功能，运行时没有效果。如果你希望一个图片在运行时能保持比例，那可以把图片放入装载器，把装载器的填充处理设置为“适应高度”或者“适应宽度”。</p>
</li>
<li><p><code>尺寸</code> 勾选尺寸右侧的箭头，显示尺寸限制的输入界面。0表示不限制。注意：修改尺寸限制不会修改当前的宽高，即使当前的宽高值超出限制值。</p>
</li>
<li><p><code>缩放</code> Scale与宽高都同样可以改变元件的显示大小，他们的不同之处在于：</p>
<ul>
<li><p>Scale是整体直接缩放，而宽高是改变元件的包围大小。例如，一个设置了九宫格的图片，如果改变它的Scale值，九宫格不会起作用，如果改变图片的宽高，则九宫格起作用。又例如，一个组件，如果改变它的Scale值，则组件作为一个整体放大或缩小，它里面的关联关系不会发生作用；如果改变组件的宽高，则只是组件的矩形范围增大或缩小，他里面的内容并不会自动增大或缩小，要依靠关联功能进行调整。所以记住一个原则：<strong>布局用宽高，做效果用Scale。</strong></p>
</li>
<li><p>关联系统只对元件的宽高有效，不计入Scale的影响。</p>
</li>
</ul>
</li>
<li><p><code>倾斜</code> 设置元件的倾斜值。 对于Unity平台，你可以放心地对图片、动画、装载器使用倾斜，这几乎不会带来额外消耗，但对于其他类型的元件，例如组件，请谨慎使用。组件的倾斜需要使用到FairyGUI提供的PaintMode技术，目标组件会转化为RenderTexture，再应用倾斜，这会有一定的内存消耗。务必阅读<a href="../unity/special.html#PaintMode">PaintMode</a></p>
</li>
<li><p><code>轴心</code> 旋转、缩放、倾斜这些变换时的轴心点。取值范围是0~1。例如X=0.5，Y=0.5表示中心位置。点击右边的小三角形可以快速设置一些常用的值，比如中心，左下角，右下角等。</p>
</li>
<li><p><code>同时作为锚点</code> 勾选这个选项后，元件的原点位置将设置为轴心所在的位置。默认情况下，每个元件的(0,0)都是在左上角；勾选了轴心同时作为锚点后，则元件的(0,0)在轴心的位置。</p>
</li>
<li><p><code>透明度</code> 设置元件的透明度。0表示全透明，1表示全不透明。</p>
</li>
<li><p><code>旋转</code> 设置元件的旋转角度，单位是度（degree）。正数表示顺时针旋转，负数表示逆时针旋转。</p>
</li>
<li><p><code>不可见</code> 使元件处于不可见状态。在编辑状态下，即使勾选了，元件依然是可见的，只有预览状态和运行状态，才生效。</p>
</li>
<li><p><code>变灰</code> 使元件呈现一个灰度的效果。默认情况下，FairyGUI会使用一个颜色滤镜为其生成灰度效果。但对于组件，除了使用颜色滤镜使其整体改变灰度，还可以自定义效果。例如，一个按钮组件，由底图和上面的图片文字组成。左边是正常状态，中间是设置了“变灰”后的效果。如果我们只是希望处于变灰状态时，只要图片文字变灰，不希望底图变灰，那么可以像右图那样，在组件里定义一个名称为“grayed”的控制器，由这个控制器去控制具体变灰的状态。定义了这个名称的控制器后，默认的整体变灰效果消失。</p>
<p><img src="../../images/20170727093435.png" alt></p>
</li>
<li><p><code>不可触摸</code> 使元件处于不可交互的状态。鼠标点击和触摸屏触摸都不会有任何事件产生。注意：图片、普通文本（不包括输入文本和富文本）、动画是永远不可触摸的。如果要对他们侦听点击事件，请转换为组件，或者使用富文本、装载器(GLoader)。</p>
</li>
</ul>
<h2 id="效果属性"><a href="#效果属性" class="headerlink" title="效果属性"></a>效果属性</h2><p><img src="../../images/QQ20191211-164300.png" alt></p>
<ul>
<li><p><code>BlendMode</code> 这个提供了一部分的混合选项设置。对于Unity平台，对图片、动画、文字，你可以放心地修改它们的BlendMode。但对于组件，请谨慎使用。组件的BlendMode需要使用到FairyGUI提供的PaintMode技术，目标组件会转化为RenderTexture，再使用混合选项，这会有一定的内存消耗。务必阅读<a href="../unity/special.html#PaintMode">PaintMode</a></p>
<p>Unity的Blend效果与编辑器中的预览可能会有差别。开发者可以通过使用以下代码重定义混合效果。注意：设置了特别BlendMode的显示对象无法与其他显示对象合并Draw Call。</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">BlendModeUtils.Override(BlendMode.Add,</span><br><span class="line">    UnityEngine.Rendering.BlendMode.XX, UnityEngine.Rendering.BlendMode.XX);</span><br></pre></td></tr></table></figure>
</li>
<li><p><code>滤镜</code> 目前编辑器支持两种滤镜的定义，颜色滤镜和模糊滤镜。对于H5类平台，请谨慎使用滤镜，因为会带来一定的消耗；对于Unity平台，你可以放心地对图片、动画、装载器使用颜色滤镜，这几乎不会带来额外消耗，但对于其他类型的元件，例如组件，请谨慎使用。组件的滤镜需要使用到FairyGUI提供的PaintMode技术，目标组件会转化为RenderTexture，再使用滤镜，这会有一定的内存消耗。务必阅读<a href="../unity/special.html#PaintMode">PaintMode</a></p>
<p>注意：设置了滤镜的显示对象无法与其他显示对象合并Draw Call。</p>
</li>
</ul>
<h2 id="其他"><a href="#其他" class="headerlink" title="其他"></a>其他</h2><p><img src="../../images/QQ20191211-164316.png" alt></p>
<ul>
<li><p><code>Tooltips</code></p>
<p>Tooltips的作用：当鼠标移到元件范围内时，弹出一个文本提示，移出元件范围后，文本提示自动消失。使用Tooltips要按照下面几个步骤准备：</p>
<ol>
<li>制作一个组件，这个组件的“扩展”属性需要定义为“标签”，以便系统将TIPS文本设置到标签的“标题”属性中。</li>
<li>打开编辑器主菜单“文件-&gt;项目设置”，然后在弹出的对话框里选择“默认值”，右边面板会出现一个“TIPS组件”的设置，将你制作好的标签组件拖入。</li>
<li>完成上面两步后编辑器就可以正常使用Tooltips预览。但运行时需要使用代码再次设置：</li>
</ol>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">UIConfig.tooltipsWin = <span class="string">"ui://包名/组件名"</span>;</span><br></pre></td></tr></table></figure>
</li>
<li><p><code>自定义数据</code></p>
<p>可以设置一个自定义的数据，这个数据FairyGUI不做解析，按原样发布到最后的描述文件中。开发者可以在运行时获取。获取方式是：<code>GObject.data</code>或<code>GObject.userData</code>（Cocos2dx、Vision）。</p>
</li>
</ul>
<h2 id="GObject"><a href="#GObject" class="headerlink" title="GObject"></a>GObject</h2><ul>
<li><p><code>设置坐标</code> SetXY、SetPosition或者单独设置x、y。</p>
</li>
<li><p><code>设置大小</code> SetSize或者单独设置width、height。SetSize还可以带第三个参数：</p>
</li>
</ul>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line"><span class="comment">//忽略轴心的影响，即在设置了轴心的情况下，改变大小也不会同时改变坐标。</span></span><br><span class="line">aObject.SetSize(<span class="number">100</span>,<span class="number">100</span>,<span class="literal">true</span>);</span><br></pre></td></tr></table></figure>
<ul>
<li><p><code>设置大小限制</code> minWidth、maxWidth、minHeight、maxHeight。</p>
</li>
<li><p><code>设置Scale</code> SetScale或者单独设置scaleX、scaleY。</p>
</li>
<li><p><code>设置轴心</code> SetPivot或者单独设置pivotX、pivotY。</p>
</li>
</ul>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">aObject.SetPivot(<span class="number">0.5f</span>, <span class="number">0.5f</span>); <span class="comment">//设置轴心</span></span><br><span class="line">aObject.SetPivot(<span class="number">0.5f</span>, <span class="number">0.5f</span>, <span class="literal">true</span>); <span class="comment">//设置轴心，并同时作为锚点</span></span><br></pre></td></tr></table></figure>
<ul>
<li><p><code>设置可见</code> visible = true/false。注意：即使对象设置visible=false，它仍然在显示列表中，所以仍然会消耗一定的计算资源（但不会消耗渲染资源），所以如果是长期的隐藏，建议移出显示列表，即RemoveFromParent。另外，不要和显示控制器混淆，两者是独立的。即使对象的visible=true,如果不在显示控制器的指定页面里，对象仍然是不可见的。</p>
</li>
<li><p><code>设置交互</code> touchable = true/false。</p>
</li>
<li><p><code>设置变灰</code> grayed = true/false。</p>
</li>
<li><p><code>设置激活</code> enabled = true/false。 元件的激活状态其实是由变灰+不可触摸共同组成。</p>
</li>
</ul>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line"><span class="comment">//等同于调用GObject.grayed = true + GObject.touchable = false</span></span><br><span class="line">aObject.enabled = <span class="literal">false</span>;</span><br></pre></td></tr></table></figure>
<ul>
<li><p><code>设置旋转</code> rotation。Unity版本还支持rotationX和rotationY。2D UI由正交相机渲染，设置rotationX或rotationY可以有旋转效果，但无透视效果。FairyGUI提供了透视模拟的功能。例如：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line"><span class="comment">//设置对象实用透视模拟</span></span><br><span class="line">aObject.displayObject.perspective = <span class="literal">true</span>;</span><br><span class="line"><span class="comment">//可以设置相机距离</span></span><br><span class="line">aObject.displayObject.focalLength = <span class="number">2000</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">//此时旋转X轴或Y轴可以有透视效果。</span></span><br><span class="line">aObject.rotaionX = <span class="number">30</span>;</span><br></pre></td></tr></table></figure>
</li>
<li><p><code>获得原生对象</code> displayObject/node<em>(CocosCreator)</em>。例如：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line"><span class="comment">//获取原生对象</span></span><br><span class="line">DisplayObject displayObject = aObject.displayObject;</span><br><span class="line"></span><br><span class="line"><span class="comment">//CococCreator获取原生对象</span></span><br><span class="line"><span class="keyword">let</span> node:cc.Node = aObject.node;</span><br><span class="line"></span><br><span class="line"><span class="comment">//Unity版本获取GameObject</span></span><br><span class="line">GameObject go = displayObject.gameObject;</span><br></pre></td></tr></table></figure>
</li>
<li><p><code>销毁</code> Dispose。销毁对象，当对象不再使用可以调用它，且必须调用。注意：纹理、声音等这些公共资源是由UIPackage管理的，销毁对象不会回收这些资源。如果要回收这些资源，应该使用UIPackage.RemovePackage。</p>
</li>
<li><p><code>resourceURL</code> 对象在资源库中的URL地址。只有图片、动画、组件这些有链接资源的对象才能获得这个URL值。可以用这个URL比较两个组件对象是不是由同一个组件资源构建的。URL是内部编码格式，不可读，如果要获得资源名称，可以使用下面的方法：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line"><span class="comment">//对象在资源库中的名称</span></span><br><span class="line">Debug.Log(aObject.packageItem.name);</span><br><span class="line"></span><br><span class="line"><span class="comment">//根据URL获得资源名称</span></span><br><span class="line">Debug.Log(UIPackage.GetItemByURL(resourceURL).name);</span><br></pre></td></tr></table></figure>
</li>
<li><p><code>onStage</code> 获取对象是否在舞台上。对象是否在舞台上受多种因素影响，例如对象是否在显示列表中，是否被显示控制器隐藏，是否被组的显示控制隐藏等。</p>
</li>
</ul>

    
    <div class="footer">
      发现错误或想贡献文档?
      <a href="https://github.com/fairygui/fairygui.github.io/tree/master/src/guide/editor/object.md" target="_blank">
        在 Github 上编辑此文档!
      </a>
    </div>
</div>

                
            </div>
            <script src="/docs/js/smooth-scroll.min.js"></script>
        

        <!-- main custom script for sidebars, version selects etc. -->        
        <script src="/docs/js/css.escape.js"></script>
        <script src="/docs/js/common.js"></script>
    </body>
</html>
